<template>
  <div class="detail">
    <el-dialog
      title="订单详情"
      top="1rem"
      width="90%"
      :visible.sync="selfShow">
      <template v-if="detail && selfShow">
        <div class="hint">
          <div class="text">活动信息</div>
        </div>
        <div class="items">
          <div class="item">
            <div class="field">活动标题:</div>
            <div class="box">{{detail.activity.title}}&nbsp;[{{detail.activity.city_name}}]</div>
          </div>
          <div class="item">
            <div class="field">俱乐部:</div>
            <div class="box">{{detail.activity.club_name}}</div>
          </div>
          <div class="item">
            <div class="field">活动团期:</div>
            <div class="box">第{{detail.group_stage.stage_num}}.{{detail.group_stage.id}}期</div>
          </div>
          <div class="item">
            <div class="field">下单时间:</div>
            <div class="box">{{detail.create_date}}</div>
          </div>
          <div class="item" v-if="inArray(detail.status, [3,99])">
            <div class="field">支付时间:</div>
            <div class="box">{{detail.pay_date}}</div>
          </div>
          <div class="item">
            <div class="field">订单编号:</div>
            <div class="box">{{detail.order_no}}</div>
          </div>
          <div class="item" v-if="inArray(detail.status, [3,99])">
            <div class="field">支付单号:</div>
            <div class="box">{{detail.pay_no}}</div>
          </div>
          <div class="item">
            <div class="field">订单金额:</div>
            <div class="box">{{(Number(detail.total_price) / 100).toFixed(2)}}元</div>
          </div>
          <div class="item" v-if="inArray(detail.status, [3,99])">
            <div class="field">支付金额:</div>
            <div class="box">{{(Number(detail.pay_money) / 100).toFixed(2)}}元</div>
          </div>
          <div class="item">
            <div class="field">订单状态:</div>
            <div class="box">{{orderStatus[detail.status]}}</div>
          </div>
          <div class="item">
            <div class="field">下单用户:</div>
            <div class="box">
              <div style="display: flex;align-items: center;">
                <img :src="detail.member.avatar" style="width: 40px;height: 40px;border-radius: 50%" />
                &nbsp;
                {{detail.member.nickname}}
              </div>
            </div>
          </div>
        </div>
        <div class="hint">
          <div class="text">出行人</div>
        </div>
        <el-table
          border
          style="width: 100%"
          :data="detail.attach">
          <el-table-column
            width="120"
            label="姓名">
            <template slot-scope="scope">
              <template v-if="!scope.row.edit">
                {{scope.row.fullname}}
              </template>
              <template v-else>
                <el-input v-model="scope.row.fullname"></el-input>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="性别">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="scope.row.travel_sex" placeholder="请选择">
                  <el-option label="男" :value="1"></el-option>
                  <el-option label="女" :value="2"></el-option>
                </el-select>
              </template>
              <template v-else>
                {{travel_sex[scope.row.travel_sex]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="类型">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="scope.row.travel_type" placeholder="请选择">
                  <el-option label="成人" :value="1"></el-option>
                  <el-option label="儿童" :value="2"></el-option>
                </el-select>
              </template>
              <template v-else>
                {{travel_type[scope.row.travel_type]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            width="120"
            label="手机号">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.travel_mobile"></el-input>
              </template>
              <template v-else>
                {{scope.row.travel_mobile}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            label="证件类型">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="scope.row.travel_certificate_type" placeholder="请选择">
                  <el-option label="大陆身份证" :value="1"></el-option>
                  <el-option label="香港证件" :value="2"></el-option>
                  <el-option label="澳门证件" :value="3"></el-option>
                  <el-option label="台湾证件" :value="4"></el-option>
                  <el-option label="护照" :value="5"></el-option>
                </el-select>
              </template>
              <template v-else>
                {{travel_certificate[scope.row.travel_certificate_type]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            width="220"
            label="证件号码">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-input v-model="scope.row.travel_certificate_number"></el-input>
              </template>
              <template v-else>
                {{scope.row.travel_certificate_number}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            label="价格">
            <template slot-scope="scope">
              {{(Number(scope.row.price) / 100).toFixed(2)}}元
            </template>
          </el-table-column>
          <el-table-column
            width="250"
            label="上车点">
            <template slot-scope="scope">
              <template v-if="scope.row.edit">
                <el-select v-model="scope.row.collection_point_id" @change="(id) => {changeCollection(id,scope.row)}" placeholder="请选择">
                  <el-option
                    v-for="(item, idx) in collectionPointsItems"
                    :key="'collection-points-items' + idx"
                    :label="item.title ? item.title : item.address" :value="item.id"></el-option>
                </el-select>
              </template>
              <template v-else>
                {{scope.row.title ? scope.row.title : scope.row.address}}
              </template>
            </template>
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              {{statusText[scope.row.status]}}
            </template>
          </el-table-column>
          <el-table-column
            label="取消原因">
            <template slot-scope="scope">
              {{scope.row.cancel_reason}}
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            width="150px"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="little"
                v-if="!scope.row.edit"
                @click="showEditTravel(scope.$index)"
                type="success">编辑</el-button>
              <el-button
                size="little"
                v-else
                @click="closeEditTravel(scope.$index)"
                type="warning">保存</el-button>
              <el-button
                size="little"
                v-if="scope.row.status === 1"
                @click="cancelTravelByNotPay(scope.row.id)"
                type="danger">取消</el-button>
              <el-button
                size="little"
                @click="cancelTravelByPay(scope.row.id)"
                v-if="scope.row.status === 99"
                type="danger">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:show', false)">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    orderNo: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      collectionPointsItems: [],
      travel_certificate: {
        1: '大陆身份证',
        2: '香港证件',
        3: '澳门证件',
        4: '台湾证件',
        5: '护照'
      },
      orderStatus: {
        1: '待支付',
        2: '支付超时(交易关闭)',
        3: '订单已全部退款',
        4: '交易关闭(未支付时出行人被全部取消)',
        5: '申请退款中',
        99: '报名成功'
      },
      statusText: {
        1: '待支付',
        2: '已取消(未支付取消)',
        3: '已取消(已退款取消)',
        4: '申请取消中',
        5: '退款中',
        99: '报名成功'
      },
      travel_sex: {
        1: '男',
        2: '女'
      },
      travel_type: {
        1: '成人',
        2: '儿童'
      },
      selfShow: false,
      detail: null
    }
  },
  watch: {
    show (val) {
      this.selfShow = val
      if (val) {
        this.getDetail()
      }
    },
    selfShow (val) {
      if (!val) {
        this.detail = {attach: []}
        this.$emit('update:show', false)
      }
    },
    detail () {
      this.detail.attach = this.detail.attach.map(item => {
        item.edit = false
        return item
      })
      this.getCollectionPointItems()
    }
  },
  methods: {
    /**
     *  未支付时取消出行人
     */
    cancelTravelByNotPay (attachId) {
      this.$prompt('请输入取消理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) {
          this.toast('请输入取消理由', 'error')
          return false
        }
        this.showLoading()
        this
          .$api
          .activityOrder
          .cancelTravelByNotPay(attachId, value)
          .then(r => {
            this.toast('取消成功')
            this.getDetail()
          })
      }).catch(() => {})
    },
    /**
     *  取消出行人并退款
     */
    cancelTravelByPay (attachId) {
      let notice = '请输入取消理由,'
      switch (this.detail.pay_method) {
        case 1:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 2:
          notice += '资金将原路返回到该用户的微信账户中，并且此操作无法恢复'
          break
        case 3:
          notice += '资金将原路返回到该用户的支付宝账户中，并且此操作无法恢复'
          break
      }
      this.$prompt(notice, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (!value) {
          this.toast('请输入取消理由', 'error')
          return false
        }
        this.showLoading()
        this
          .$api
          .activityOrder
          .cancelTravelByPay(attachId, value)
          .then(r => {
            this.toast('取消成功')
            this.getDetail()
          })
      }).catch(() => {})
    },
    /**
     *  获取订单详情
     */
    getDetail () {
      this.showLoading()
      this
        .$api
        .activityOrder
        .detail(this.orderNo)
        .then(r => {
          this.detail = r
        })
    },
    /**
     * @purpose 编辑出行人上传点
     */
    changeCollection (id, attach) {
      this.collectionPointsItems.map(item => {
        if (id === item.id) {
          attach.title = item.title
          attach.address = item.address
        }
      })
    },
    /**
     *  获取团期集合点列表
     */
    getCollectionPointItems () {
      this
        .$api
        .activity
        .collectionPointItems(this.detail.group_stage_id)
        .then(r => {
          this.collectionPointsItems = r
        })
    },
    /**
     * 显示编辑出行人
     */
    showEditTravel (index) {
      this.detail.attach = this.detail.attach.map((item, idx) => {
        if (Number(index) === idx) {
          item.edit = true
        }
        return item
      })
    },
    /**
     * 编辑编辑出行人并提交数据
     */
    closeEditTravel (index) {
      let attach = {}
      this.detail.attach = this.detail.attach.map((item, idx) => {
        if (Number(index) === idx) {
          item.edit = false
          attach = item
        }
        return item
      })
      this
        .$api
        .activityOrder
        .editAttach(attach)
    }
  }
}
</script>
<style scoped lang="sass">

  .hint
    width: 100%
    height: 40px
    display: flex
    align-items: center
    border-left: 4px solid #09bb07
    background-color: #ebebeb
    margin: 1.5rem 0
    .text
      font-size: 1rem
      margin-left: .5rem
      font-weight: bold
  .items
    width: 100%
    height: auto
    .item
      width: 100%
      height: 50px
      border: 1px solid #ebebeb
      display: flex
      align-items: center
      border-top: none
      &:first-child
        border-top: 1px solid #ebebeb
      .box
        flex: 1
        height: 100%
        display: flex
        align-items: center
        padding: 0 1rem
        font-size: 1rem
        border-right: 1px solid #ebebeb
        &:last-child
          border-right: none
      .field
        width: 150px
        height: 100%
        border-right: 1px solid #ebebeb
        display: flex
        align-items: center
        font-size: 1rem
        justify-content: flex-end
        padding-right: 1rem
  .text-picture-detail
    width: 100%
    height: 500px
    display: flex
    justify-content: center
    .content
      width: 320px
      height: 100%
      overflow-x: hidden
      overflow-y: auto
      padding: 1rem
      border-radius: 5px
      background-color: #f4f4f4
</style>
